<template>
  <div>
    <template v-for="(item,index) in list">
      <div
        class="wdw-item_hover"
        :key="item.id"
      >
        <!-- 新建文件夹 -->
        <div
          class="wdw-item"
          v-if="item.isupload"
        >
          <div
            class="wdw-item_svg_text cursor-p"
            style="margin-left:31px"
          >
            <svg
              class="icon-symbol icon-svg-yasuobao"
              aria-hidden="true"
            >
              <use xlink:href="#icon-wenjianjia"></use>
            </svg>
            <el-input
              class="wdw-el_input"
              v-model="item.title"
              ref="wdwinput"
              @submit.prevent
              @focus="onfocusError"
            >
              <i
                v-show="isInputError"
                class="el-icon-error inpt-error"
                slot="suffix"
              >
              </i>
            </el-input>
            <i
              class="el-icon-success wdw-icon_but"
              @click="uploadSuccess(item,index)"
            ></i>
            <i
              class="el-icon-error wdw-icon_but"
              @click="uploadError(index)"
            ></i>
          </div>
        </div>
        <!-- 文件夹  
        
         :style="{'height': proitemhide ? '1.8em':'0px' }"
         :style="{'padding-left': wdwpadd === false ? '' : '20px'}"
         @click="wdwIconClick(index)"
         ,'wdw-item_click':frozenIsClass
         -->
        <div
          class="wdw-item"
          v-else
          :class="{'wdw-item_click': item.isItemBack}"
          @click="wdwitemclick(index,item)"
        >
          <div
            v-if="item.son"
            class="wdw-item_icon cursor-p"
            :class="item.isClass ? 'wdw-item_after_jian':'wdw-item_after_jia'"
          ></div>
          <span
            v-if="item.lodaing"
            class="lodaing"
          ></span>
          <div
            class="wdw-item_svg_text cursor-p"
            :style="{'margin-left':item.son ? '' :'28px' }"
          >
            <svg
              class="icon-symbol icon-svg-yasuobao"
              aria-hidden="true"
            >
              <use xlink:href="#icon-wenjianjia"></use>
            </svg>
            <p class="wdw-item_text">{{item.title}}</p>
          </div>
        </div>
        <div
          class="children"
          :style="{'height': item.isClass ? 'auto' : '0px'}"
        >
          <!-- 
            :style="{'max-height':(childrenheight * 38.8) + 'px'}"
            :style="{'height':childrenheight + 'px'}"
            :style="{'height': item.isheight ? '0px' : 'auto'}"
            :style="{'height': item.isheight ? '0px' : (item.children.length * 38.8) + 'px'}" -->
          <template v-if="item.children">
            <wdw-item :wdwList='item.children'></wdw-item>
          </template>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import emiton from '@/common/emit/emiton'
import MoveFileMixins from '@/mixins/MoveFile-mixins'
// let itemClick = {}
export default {
  name: 'WdwItem',
  props: {
    wdwList: {
      type: Array,
      default() {
        return []
      },
    },
    /*  proitemhide: {
      type: Boolean,
      default: false,
    }, */
  },
  mixins: [MoveFileMixins],
  watch: {
    wdwList(val, olval) {
      this.list = val
      // input获取鼠标焦点
      const find = val.find(item => item.title == '')
      if (find) {
        this.$nextTick(() => {
          this.$refs.wdwinput[0].focus()
        })
      }
    },
  },
  data() {
    return {
      list: [],
      childrenheight: 0,
      itemhide: false,
      isInputError: false,
    }
  },
  created() {
    this.list = this.wdwList
  },
  methods: {
    // 点击文件夹
    wdwitemclick(index, item) {
      if (this.list[index].id == 0) {
        this.list[index].isItemBack = !this.list[index].isItemBack
        this.$emit('frozenClick', this.list[index].isClass)
        return
      }
      // 发送事件
      emiton.$emit('wdwItem', item)
      this.list[index].isItemBack = true
      // 判断有没有子文件夹
      if (this.list[index].son != 1) return
      this.openfolder(index)
    },
    // 展开文件
    openfolder(index) {
      const ish = !this.list[index].isClass
      // 判断点击展开
      if (ish) {
        this.list[index].isClass = ish
        // 判断当前的文件夹没有子文件夹
        if (this.list[index].children.length == 0) {
          this.getsonfolder(index)
        }
      } else {
        this.list[index].isClass = ish
      }
    },
    // 请求获取子文件夹
    async getsonfolder(index) {
      try {
        this.list[index].lodaing = true
        const request = await this.$http.host.get('/moveFile/son', { parent_file_id: this.list[index].id })
        const childrenArr = this.forAddKey(request.data)
        setTimeout(() => {
          this.list[index].children.push(...childrenArr)
          this.list[index].lodaing = false
        }, 500)
      } catch (error) {
        console.log('请求获取子文件夹失败', error)
        this.$message.error('奇怪的错误！')
      }
    },
    // 确定新建文件夹
    async uploadSuccess(val, i) {
      if (val.title == '') {
        this.$message.error('请输入文件夹名！')
        return
      }
      // 开启加载
      this.$emit('addupload', true)
      // 查找同命名文件
      let parentData
      if (val.parent_file_id == 0) {
        parentData = this.forValue(this.$parent.widlist, val.title)
      } else {
        parentData = this.forValue(this.list, val.title)
      }
      if (parentData) {
        this.isInputError = true
        this.$message.error('已有该名称文件夹！')
        return
      }
      try {
        const body = val
        delete body.id
        delete body.isupload
        const request = await this.$http.host.post('/moveFile/addfolder_yidong', body)
        if (request.code == 200) {
          const addkey = this.forAddKey(request.data)
          this.$set(this.list, i, addkey[0])
          if (val.parent_file_id != 0) {
            emiton.$emit('folderadd')
          }
        } else {
          this.$message.error(request.msg)
          this.uploadError(i)
        }
      } catch (error) {
        console.log('新建文件夹失败', error)
        this.$message.error('奇怪的错误！')
      }
      setTimeout(() => {
        this.$emit('addupload', false)
      }, 1000)
    },
    // 新建文件夹取消
    uploadError(index) {
      this.list.pop()
    },
    onfocusError() {
      this.isInputError = false
    },
    // 遍历判断同命名
    forValue(array, title) {
      // 只有它自己就return
      if (array.length == 1) return false
      let is = false
      let len = array.length
      for (let index = 0; index < len - 1; index++) {
        if (array[index].title == title) {
          is = true
        }
      }
      return is
    },
  },
}
</script>

<style lang="scss" scoped>
.icon-symbol {
  width: 1.8em;
  height: 1.8em;
  vertical-align: 0;
  fill: currentColor;
  overflow: hidden;
  margin-left: 10px;
}

.wdw-item {
  position: relative;
  width: 100%;
  @include dif-alc;
  padding: 5px 0;

  .wdw-item_icon {
    width: 14px;
    height: 14px;
    border: 1px solid #dcdfe6;
    border-radius: 3px;
    margin: 2px 2px 2px 10px;
    line-height: 9px;
    text-align: center;
  }

  .wdw-item_after_jia::after {
    content: '+';
    font-size: 16px;
    color: #817f7f;
    font-weight: 700;
  }

  .wdw-item_after_jian::after {
    content: '-';
    font-size: 17px;
    color: #817f7f;
    font-weight: 700;
  }

  .wdw-item_svg_text {
    width: 100%;
    @include dif-alc;
  }

  .wdw-item_text {
    color: $textColor;
    font-size: 14px;
    margin-left: 10px;
    width: 70%;
    @include text-d;
  }
}

.wdw-item:hover {
  background: #e5f0fb;
}

.wdw-item_click {
  background: #e5f0fb;
  /*   border-top: 1px solid #bbd4ef;
  border-bottom: 1px solid #bbd4ef; */
}
.children {
  margin-left: 20px;
  transition: all 1s linear;
  overflow: hidden;
}
.wdw-el_input {
  width: 200px;
  margin-left: 10px;
  margin-top: 3px;
}
.wdw-el_input ::v-deep .el-input__inner {
  width: 200px;
  height: 25px;
  padding: 0px 5px;
}
.wdw-icon_but {
  font-size: 22px;
  margin-left: 10px;
  color: #65c1f3f7;
  margin-top: 3px;
}
.lodaing {
  width: 14px;
  height: 14px;
  border-top: 1px solid;
  border-color: linear-gradient(#999, #d0cfcf);
  border-radius: 50%;
  animation: identifier 3s linear infinite;
  margin-left: 5px;
}
@keyframes identifier {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.inpt-error {
  color: rgb(255, 0, 0);
  margin-top: 6px;
}
</style>